<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adenoid Flask Demo</title>
    <style>
        body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; padding: 0; background: #0f0c29; color: #fff; }
        .container { max-width: 1000px; margin: 0 auto; padding: 24px; }
        .card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 20px; }
        h1 { margin: 0 0 12px; }
        .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .box { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 10px; }
        .img { width: 100%; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); }
        .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; background: #1e90ff; color: #fff; border: none; cursor: pointer; }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; }
        .stat { display: flex; gap: 24px; margin-top: 12px; }
        .stat .item { background: rgba(255, 255, 255, 0.06); padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); }
        .footer { margin-top: 16px; font-size: 12px; color: rgba(255,255,255,0.7) }
    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <h1>Adenoid | Flask 示例页面</h1>
        <p>上传单张影像进行分割，后端采用 Flask 提供接口，非原有 FastAPI 实现。</p>

        <div style="display:flex; align-items:center; gap:12px; margin: 12px 0;">
            <input type="file" id="fileInput" accept="image/*" />
            <button id="submitBtn" class="btn">开始分析</button>
        </div>

        <div class="row">
            <div class="box">
                <div style="margin-bottom:6px; opacity: 0.8;">原始影像</div>
                <img id="originalImg" class="img" alt="original" />
            </div>
            <div class="box">
                <div style="margin-bottom:6px; opacity: 0.8;">分割结果</div>
                <img id="resultImg" class="img" alt="result" />
            </div>
        </div>

        <div class="stat">
            <div class="item"><div>A/N 比率</div><div id="ratio">--</div></div>
            <div class="item"><div>诊断建议</div><div id="diag">--</div></div>
        </div>

        <div class="footer">后端地址：<code>http://127.0.0.1:8001</code>，接口：<code>POST /predict</code></div>
    </div>
</div>

<script>
    const fileInput = document.getElementById('fileInput');
    const submitBtn = document.getElementById('submitBtn');
    const originalImg = document.getElementById('originalImg');
    const resultImg = document.getElementById('resultImg');
    const ratioEl = document.getElementById('ratio');
    const diagEl = document.getElementById('diag');

    // 关键功能：上传文件并调用 Flask 接口完成推理
    submitBtn.addEventListener('click', async () => {
        const file = fileInput.files[0];
        if (!file) { alert('请先选择图片'); return; }

        originalImg.src = URL.createObjectURL(file);
        submitBtn.disabled = true;
        submitBtn.textContent = '分析中...';

        const formData = new FormData();
        formData.append('file', file);

        try {
            const resp = await fetch('/predict', { method: 'POST', body: formData });
            if (!resp.ok) throw new Error('服务返回错误');
            const data = await resp.json();
            resultImg.src = data.image;
            ratioEl.textContent = Number(data.ratio).toFixed(3);
            diagEl.textContent = data.diagnosis;
            ratioEl.style.color = (data.ratio >= 0.6) ? '#ff4757' : (data.ratio >= 0.3) ? '#f1c40f' : '#2ed573';
            diagEl.style.color = ratioEl.style.color;
        } catch (e) {
            alert('分析失败，请检查 Flask 服务是否启动: ' + e.message);
        } finally {
            submitBtn.disabled = false;
            submitBtn.textContent = '开始分析';
        }
    });
</script>
</body>
</html>

